<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 400px;
            background-color: #6ff;
            position: fixed;
            right: 5px;
            bottom: 5px;
        }
    </style>
</head>

<body>
    <button class="btn">关闭</button>
</body>
<script>
    // 计时器: 每隔固定的事件执行既定的操作(callback)   只要不清除会一直执行

    // 延时器: 延迟一段时间执行既定的操作(callback)   => 只执行一次
    // setTimeout(callback,delayTime,arg1,arg2...argN)
    // callback  回调函数 => 延迟执行的内容
    // delayTime 延迟时间
    // arg1,arg2...argN  如果回调函数需要接收参数 从第三参数开始传入
    // 返回值: 延时器编号

    // 清除延时器
    // clearTimeout(延时器编号)



    // 多个计时相互嵌套的操作

    // 每隔5秒启动一个倒计时,倒计时5之后关闭

    // 计时器嵌套计时器 => 外层计时器不会等待内层计时器结束在开启下一次,而是直接开启下一次
    // var timer1 = setInterval(function () {
    //     var count = 5;
    //     var timer2 = setInterval(function () {
    //         console.log(count);
    //         count--;
    //         if (count == 0) {
    //             clearInterval(timer2);
    //             console.log("一个计时器停止", timer2);
    //         }
    //     }, 1000);
    //     console.log("启动一个计时器", timer2);
    // }, 2000)

    // 延时器改计时器   => 通过递归重复调用自己




    var btn = document.getElementsByClassName("btn")[0];

    var count = 0;
    var timer = null;

    btn.onclick = function () {
        clearTimeout(timer);
    }

    // function loop() {
    //     timer = setTimeout(function () {
    //         var count = 5;
    //         var timer2 = setInterval(function () {
    //             console.log(count);
    //             count--;
    //             if (count == 0) {
    //                 clearInterval(timer2);
    //                 console.log("一个计时器停止", timer2);
    //                 loop();  // 计时器结束开启下一次
    //             }
    //         }, 1000);
    //         console.log("启动一个计时器", timer2);
    //     }, 1000);
    // }
    // loop();

    // function loop() {
    //     clearTimeout(timer);
    //     timer = setTimeout(function () { // 从延时器开始到回调函数执行需要1s,只要在此期间清除延时器 => 就不会再执行回调函数
    //         count++;
    //         console.log(count);
    //         loop(); // 回调函数执行过程中直接开启下一次
    //     }, 1000);
    // }
    // loop();








</script>

</html>